<template>
<div class="doctor hvr-bounce-in">
  <div class="pics-contain">
    <el-image v-if="doctor.avatar!==null" :src=doctor.avatar style="width: 120px;height: 120px"></el-image>
    <el-image v-else :src="defaultAvatar" style="width: 100px;height: 100px" ></el-image>
  </div>
  <div class="doctor-text">
    <div class="doctor-department">{{doctor.subject}}</div>
    <div class="doctor-name"><span>{{doctor.name}} {{doctor.proTitle}}</span></div>
    <div class="moreInf"><el-button type="text" @click="go2Doctor">详情</el-button></div>
  </div>
</div>
</template>

<script>
export default {
  name: "DoctorCardTemplate",
  props:['doctor'],
  mounted() {

  },
  data(){
    return{
      defaultAvatar:'https://gitee.com/Kolvzaki/pics/raw/master/img/default_avatar.jpg'
    }
  },
  methods:{

    go2Doctor(){
      this.$router.push({
        path: '/doctor',
        query:{
          drId: this.doctor.docId
        }
      })
    },
  }
}
</script>

<style scoped>
.doctor{
  transition: 0.25s;
  cursor: default;
  font-size: 16px;
  margin-left: 20px;
  margin-top: 20px;
}

.doctor:hover{
  box-shadow: 3px 2px 5px #5D6D7E ;

}
</style>